import * as React from "react";
import {Question} from "../types";

interface Props {
    question: Question;
    printId?: number;
    className?: string;
}

/**
 * [BASIC] 考题列表项
 * @param question 考题对象，对应Ques表的一行
 * @param printId 打印时的序号
 * @param className 扩展
 */
function BaseQuesItem({question, printId = 0, className = ''}: Props) {
    return (
        <div tabIndex={0}
             className={`print:collapse-open collapse mb-2 bg-base-100 text-base-content
                 hover:bg-base-200 focus:bg-base-200 ${className}`}
        >
            <div className="collapse-title font-semibold p-4">
                <span className="print:hidden mr-2">{question.id}.</span>
                <span
                    className="print:hidden mr-2 font-medium text-primary">({question.rating}% {question.history_count}次 {question.ques_type})</span>
                <span className="hidden print:inline mr-2">{printId}.</span>
                {question.content?.replace(/ {4,}/g, '____')}
                {question.content_img && (
                    <img src={question.content_img} className="max-w-full max-h-36 object-contain" alt=''/>
                )}
            </div>
            <div className="collapse-content text-sm">
                <div className="mb-1 flex">
                    <span className={
                        `font-semibold mx-4 
                        ${(question.answer === 'A' ? 'text-accent underline':'')}
                        print:text-black print:no-underline`}
                    >A</span>
                    {question.choice_a}
                    {question.choice_a_img && (
                        <img src={question.choice_a_img} className="max-w-full max-h-30 object-contain" alt=''/>
                    )}
                </div>
                <div className="mb-1 flex">
                    <span className={
                        `font-semibold mx-4 
                        ${(question.answer === 'B' ? 'text-accent underline':'')}
                        print:text-black print:no-underline`}
                    >B</span>
                    {question.choice_b}
                    {question.choice_b_img && (
                        <img src={question.choice_b_img} className="max-w-full max-h-30 object-contain" alt=''/>
                    )}
                </div>
                <div className="mb-1 flex">
                    <span className={
                        `font-semibold mx-4 
                        ${(question.answer === 'C' ? 'text-accent underline':'')}
                        print:text-black print:no-underline`}
                    >C</span>
                    {question.choice_c}
                    {question.choice_c_img && (
                        <img src={question.choice_c_img} className="max-w-full max-h-30 object-contain" alt=''/>
                    )}
                </div>
                <div className="mb-1 flex">
                    <span className={
                        `font-semibold mx-4 
                        ${(question.answer === 'D' ? 'text-accent underline':'')}
                        print:text-black print:no-underline`}
                    >D</span>
                    {question.choice_d}
                    {question.choice_d_img && (
                        <img src={question.choice_d_img} className="max-w-full max-h-30 object-contain" alt=''/>
                    )}
                </div>
            </div>
        </div>
    )
}

export default BaseQuesItem;